<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册</title>
    <script src="../js/code.js"></script>
    <script src="../js/cookie.js"></script>
    <script src="../js/ajax.js"></script>
    <script src="../js/interface.js"></script>
    <link rel="stylesheet" href="../css/login.css">
    <link rel="stylesheet" href="//at.alicdn.com/t/font_2836455_6ilkix860gg.css">

</head>

<body>
    <div class="header">
        <div class="left">
            <img src="http://images.400976.cn/images/77/20210616232653_36101.png" alt="">
            <a href="login.html"><span>快捷登录/</span></a>
            <a href="reg.html"><span>注册</span></a>
        </div>
        <div class="right">
            <i class="iconfont icon icon-zhengpinbaozhangxian"></i> 100%正品保障
            <i class="iconfont icon icon-013-baoyou"></i>全场满200包邮
            <i class="iconfont icon icon-shandianfahuo"></i>闪电发货

        </div>
    </div>
    <div class="my_shop"> <img src="https://assets.burberry.com/is/image/Burberryltd/MyAccount.jpg?$BBY_V2_BASIC=&qty=80,1$&wid=1903" alt="">
        <h1>注册账户</h1>
    </div>
    <div class="broadside "><img src="https://www.chanel.cn/fnbv3/design-desktop/v_2021_09.1.0/img/account/fond-d.jpg" alt=""></div>

    <form class="box" onsubmit="return false" autocomplete="on">
        <div class="sze"><img src="https://ssl1.sephorastatic.cn/wcsfrontend/campaign/campaign_img/2021/09/banner/hp_mufloor_20210923.jpg" alt=""></div>
        <div class="login_zuo"> <img src="http://www.400976.cn/templates/site/pc/images/login-zuo.jpg" alt=""></div>
        <div class="login_you"> <img src="http://www.400976.cn/templates/site/pc/images/login-you.jpg" alt=""></div>
        <div class="box_a">
            <p>
                <label for=""></label>
                <input type="text" id="user" placeholder="用户名">
                <span id="user_span"></span>
            </p>
            <p>
                <label for=""></label>
                <input type="password" id="pwd" placeholder="密&emsp;码">
                <span id="pwd_span"></span>
            </p>
            <p>
                <label for=""></label>
                <input type="text" id="phone" placeholder="手机号">
                <span id="phone_span"></span>
            </p>
            <p>
                <label for=""></label>
                <input type="text" id="email" placeholder="邮&emsp;箱">
                <span id="email_span"></span>
            </p>
            <p>
                <label for=""></label>
                <input type="text" id="code" placeholder="验证码">
                <span id="createCode">a1b2</span>
                <span id="code_span"></span>
            </p>
            <p>
                <input id="regBtn" type="submit" value="注册">
                <input id="retBtn" type="reset" value="取消">
            </p>
        </div>
    </form>

    <div class="footer">
        <p>漂洋海淘 版权所有 渝ICP证100019号</p>
        <ul>
            <li>品牌导航</li>
            <li> 资讯导航</li>
            <li> 问答导航</li>
            <li>口碑导航</li>
            <li>价格表导航</li>
            <li>图片导航</li>
        </ul>
    </div>
</body>

<script>
    // 1. JS操作元素之前必须先获取元素
    var userInp = document.getElementById("user");
    var userSpan = document.getElementById("user_span");
    var pwdInp = document.getElementById("pwd");
    var pwdSpan = document.getElementById("pwd_span");
    var phoneInp = document.getElementById("phone");
    var phoneSpan = document.getElementById("phone_span");
    var emailInp = document.getElementById("email");
    var emailSpan = document.getElementById("email_span");
    var codeInp = document.getElementById("code");
    var codeSpan = document.getElementById("code_span");
    var createCode = document.getElementById("createCode");

    var regBtn = document.getElementById("regBtn");

    var isUserOk = false;
    var isPwdOk = false;
    var isPhoneOk = false;
    var isEmailOk = false;
    var isCodeOk = false;

    createCode.innerText = randCode();
    createCode.onclick = function() {
        createCode.innerText = randCode();
    }

    // 一步到位
    userInp.onblur = function() {
        isUserOk = false;
        var user = userInp.value.trim();
        userInp.value = user;

        var userReg = /^[a-zA-Z_$][\w$]{5,11}$/;

        if (userReg.test(user)) {
            isExistUser({
                user
            }).then(data => {
                var {
                    status,
                    msg
                } = data;
                if (status) {
                    userSpan.textContent = "√";
                    userSpan.className = "right";
                    isUserOk = true;
                } else {
                    userSpan.textContent = "* 用户名已存在!";
                    userSpan.className = "err";
                }
            }).catch(err => {
                throw err
            })


        } else {
            userSpan.textContent = "* 用户名由数字,大小写字母,下划线,$组成,6-12位,且不能以数字开头";
            userSpan.className = "err";
        }
    }





    pwdInp.onblur = function() {
        var pwd = pwdInp.value.trim();
        isPwdOk = false;

        var pwdReg = /^[\w$]{6,12}$/;

        if (pwdReg.test(pwd)) {
            pwdSpan.textContent = "√";
            pwdSpan.className = "right";

            var isExistNum = false;
            var isExistSmall = false;
            var isExistBig = false;
            var isExistSpe = false;

            if (/[0-9]/.test(pwd)) isExistNum = true;
            if (/[a-z]/.test(pwd)) isExistSmall = true;
            if (/[A-Z]/.test(pwd)) isExistBig = true;
            if (/[_$]/.test(pwd)) isExistSpe = true;

            // var isExistNum = /[0-9]/.test(pwd) ? true :false;

            var sum = isExistNum + isExistSmall + isExistBig + isExistSpe;

            //  true + true + false

            switch (sum) {
                case 1:
                    pwdSpan.innerText = "密码强度:弱";
                    pwdSpan.style.color = "green";
                    break;
                case 2:
                    pwdSpan.innerText = "密码强度:中";
                    pwdSpan.style.color = "orange";
                    break;
                case 3:
                    pwdSpan.innerText = "密码强度:强";
                    pwdSpan.style.color = "yellow";
                    break;
                case 4:
                    pwdSpan.innerText = "密码强度:超强";
                    pwdSpan.style.color = "gold";
                    break;
            }

            isPwdOk = true;

        } else {
            pwdSpan.textContent = "* 密码由数字,大小写字母,下划线,$组成,6-12位";
            pwdSpan.className = "err";
        }
    }

    // 一步到位

    phoneInp.onblur = function() {
        isPhoneOk = false;
        var phone = phoneInp.value.trim();
        phoneInp.value = phone;

        var phoneReg = /^1[3-9]\d{9}$/;

        if (phoneReg.test(phone)) {
            isExistPhone({
                phone
            }).then(data => {
                var {
                    status,
                    msg
                } = data;

                if (status) {
                    phoneSpan.textContent = "√";
                    phoneSpan.className = "right";
                    isPhoneOk = true;
                } else {
                    phoneSpan.textContent = "* 手机号已注册!";
                    phoneSpan.className = "err";
                }
            }).catch(err => {
                throw err;
            })
        } else {
            phoneSpan.textContent = "* 手机号码格式不正确";
            phoneSpan.className = "err";
        }
    }







    emailInp.onblur = function() {
        isEmailOk = false;
        var email = emailInp.value.trim();
        emailInp.value = email;

        var emailReg = /^\w+@\w+\.(com|cn|email)$/;

        if (emailReg.test(email)) {
            isExistEmail({
                email
            }).then(data => {
                var {
                    status,
                    msg
                } = data;
                if (status) {
                    emailSpan.textContent = "√";
                    emailSpan.className = "right";
                    isEmailOk = true;
                } else {
                    emailSpan.textContent = "* 邮箱已注册!";
                    emailSpan.className = "err";
                }
            }).catch(err => {
                throw err;
            })


        } else {
            emailSpan.textContent = "* 邮箱格式有误";
            emailSpan.className = "err";
        }
    }

    codeInp.onblur = function() {
        isCodeOk = false;
        var code = codeInp.value.trim();
        codeInp.value = code;

        var RCode = createCode.innerText; //随机的验证码
        var codeReg = new RegExp(`^${RCode}$`, "i");

        if (codeReg.test(code)) {
            codeSpan.textContent = "√";
            codeSpan.className = "right";
            isCodeOk = true;
        } else {
            codeSpan.textContent = "* 验证码有误";
            codeSpan.className = "err";
        }
    }

    var isRegisterSuccess = false; // 记录是否注册成功
    regBtn.onclick = function() {
        if (isRegisterSuccess) return false;

        if (isUserOk && isPwdOk && isPhoneOk && isEmailOk && isCodeOk) {
            // alert("注册成功");
            var user = userInp.value;
            var pwd = pwdInp.value;
            var phone = phoneInp.value;
            var email = emailInp.value;

            register({
                user,
                pwd,
                phone,
                email
            }).then(data => {
                var {
                    status,
                    msg
                } = data;
                if (status) {
                    isRegisterSuccess = true;
                    location.href = "./login.html";
                    // alert("注册成功");
                } else {
                    alert(msg);
                    isRegisterSuccess = false;
                }
            }).catch(err => {
                throw err
            })

        } else {
            isRegisterSuccess = false;
        }
    }
</script>


</html>